<template>
  <div class="firework" :style="fireworkStyle">
    <div class="lottle">
      <lottie
              class="collect"
              :options="defaultOptions"
              :width="width"
              :height="width"
              v-on:animCreated="handleAnimation"
              v-if="animShow"
      />
    </div>
  </div>
</template>

<script>
  import collectlottie from "../../assets/firework.json"
  import { mapGetters, mapActions } from "vuex"
  export default {
    data() {
      return {
        width: parseFloat(
                getComputedStyle(window.document.documentElement)["font-size"]
        ) * 12,
        defaultOptions: { animationData: collectlottie, loop: false, autoplay: false },
        anim: {},
        animShow: false
      }
    },
    computed: {
      fireworkStyle() {
        let x = -1000, y = -1000
        if (this.fireworkCoord.type) {
          x = this.fireworkCoord.type === "tap" ? this.fireworkCoord.center.x : this.fireworkCoord.changedTouches[0].clientX
          y = this.fireworkCoord.type === "tap" ? this.fireworkCoord.center.y : this.fireworkCoord.changedTouches[0].clientY
        }
        return {
          left: x + (this.mainWidth - this.windowWidth) / 2 - this.width / 2 + "px",
          top: y + (this.mainHeight - this.windowHeight) / 2 - this.width / 2 + "px"
        }
      },
      ...mapGetters("assignmentStatus", {
        fireworkLottie: "getFireworkLottie",
        fireworkCoord: "getFireworkCoord"
      })
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim
        this.anim.setSpeed(1.5)
      }
    },
    watch: {
      fireworkLottie: function (bool) {
        if (bool) {
          this.animShow = true
          setTimeout(() => {
            this.anim.stop()
            this.anim.play()
            setTimeout(() => { this.goodMusic() }, 100)
          }, 0)
        }
        else {
          this.anim.stop()
          this.animShow = false
        }
      }
    }
  };
</script>

<style scoped lang='stylus'>
  .firework
    position absolute
    z-index 100
    width 12rem
    height 12rem
    .lottle
      position absolute
</style>
